<template>
  <div id="carousel-chart">
    <el-carousel :interval="5000">
      <el-carousel-item v-for="item in bannerList" :key="item">
        <img :src="item" class="img" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import banner_1 from "@/assets/images/home/banner_1.png";
import banner_2 from "@/assets/images/home/banner_2.png";
import banner_3 from "@/assets/images/home/banner_3.png";
import banner_n1 from "@/assets/images/home/banner_n1.png";
import banner_n2 from "@/assets/images/home/banner_n2.png";
import banner_n3 from "@/assets/images/home/banner_n3.png";
// import carouselApi from "@/api/peizhi/carouselApi.js";

export default {
  name: "carousel-chart",
  components: {},
  data() {
    return {
      bannerList: [banner_2, banner_3],
      // bannerList: [banner_n1, banner_n2, banner_n3]
      tableData: []
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    // this.apiSysHomeSlideshowQueryAll();
  },
  methods: {
    // 查询
    apiSysHomeSlideshowQueryAll() {
      carouselApi.apiSysHomeSlideshowQueryAll().then((res) => {
        if (res.obj.length != 0) {
          this.tableData = res.obj.map((item) => this.$yuUtils.changePageImgPath(item));
        } else {
          this.tableData = this.bannerList;
        }
      });
    }
  }
};
</script>

<style lang='scss' scoped>
#carousel-chart {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
  .el-carousel {
    border-radius: 16px;
  }
  border-radius: 16px !important;
  ::v-deep .el-carousel__container {
    height: 160px !important;
    // border-radius: 20px !important;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1) !important;
  }
  .el-carousel__item .img {
    height: 160px;
    width: 100%;
    // border-radius: 20px !important;
  }
  .img {
    // border-radius: 16px !important;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
    // border-radius: 20px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
    // border-radius: 20px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
  }
}
</style>
